<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/all.css">
    <style>
        .outer{
            width: 800px;
            height: 500px;
            background-color: blanchedalmond;

        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: blueviolet;

            /*主要可以计算的值都可以过度，基本上大部分都可以过度
               基本上是从一个有效数值过渡到另外一个数值
            */
            transition: all 2s;
            /*第二种方法是transition-property 设置属性
            
              transition-property:height,width......;
            再设置延时
              transition-duration:2s;
            

              transition-timing-function（动画时间函数）: 指定动画的过渡方式 
                       ease 默认值:慢速开始，先加速，再减速。
                       linear 匀速运动
                       ease-in 加速
                       ease-out 减速
                       ease-in-out开始加速，在减速


            transition-timing-function: steps(20); 分20步执行


            transition-timing-function: steps(2,end) 在你设置的1s后开始动，再1s结束后开始动，一共2s
                                                start 相反的，在1s之前开始动。。。。。。
            

             transition-delay:2s 直接延时2s

            
        */
           

        }
        .outer:hover .inner{
            width: 400px;
            height: 400px;

        }
        .fas{
          transition: all 2s;
          transition-timing-function: ease-in-out;

        }
        .outer:hover .fas{
            margin-left: 100%;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="fas fa-apple-alt"></div>
    </div>
</body>
</html>